<template>
  <div>
    <span class="_before">发票信息</span>
      <el-row justify="left" class="marginTop10 ruler-box"> 
        <el-col :span="24" align="middle" class="text-left" style="background-color: #f9f3d1;color: #666;">
          <el-icon style="color:#fba400;margin:0 5px;height: 40px;"><WarningFilled /></el-icon>
          温馨提示：发票的开票金额不包括优惠券支付部分
        </el-col>
        <el-col :span="24" style="margin: 8px 0;">一、发票开具规则：</el-col>
        <el-col :span="24" >1）下单提箱后，电子发票在48小时内自动开具(如在月初1-6号则48小时内开具)，您可登陆您的平台账户，在订单详情处下载PDF格式增值税普通发票（电子）；</el-col>
        <el-col :span="24" >2）发票开具金额为您实际支付金额，不包括优惠券支付金额；</el-col>
        <el-col :span="24" >3）您可点击申请开票并查看开票进度，如有疑问请联系集装箱公司；</el-col>
        <el-col :span="24" >4）部分省份的税局已推行全电发票，商家会根据税局要求开具，与电子普通发票具备同等法律效力。</el-col>
        <el-col :span="24" style="margin: 8px 0;">
          二、数电票是全面数字化电子发票，数电票的法律效力、基本用途等与现有纸质发票相同。其中，带有“增值税专用发票”字样的数电票，其法律效力基本用途与现有增值税专用发票相同；带有“普通发票”字样的数电票，其法律效力、基本用途与现有普通发票相同。
        </el-col>
        <el-col :span="24" style="margin: 8px 0;">三、根据国家税务政策，部分公司提供数电票。</el-col>
        <el-col :span="24" style="margin: 8px 0;">四、数电票无特定格式要求,增加了XML的数据电文格式便利交付,同时保留PDF格式，用户可根据公司需求自行选择版式进行下载。</el-col>
      </el-row>
      <el-row class="invoce-box marginTop20">
        <el-col :span="6" class="text-right">发票状态</el-col><el-col :offset="8" :span="8" style="text-left">{{ { 5: '未申请', 10: '待开票', 15: '已开票' }[rowData.invoiceStatus] }}</el-col>
        <el-col :span="6" class="text-right marginTop10">发票内容</el-col><el-col :offset="8" :span="8" class="marginTop10">购箱明细</el-col>
        <el-col :span="6" class="text-right marginTop10">发票抬头</el-col><el-col :offset="8" :span="8" class="marginTop10">{{ rowData.invoiceTitle }}</el-col>
        <el-col :span="6" class="text-right marginTop10">发票号码</el-col><el-col :offset="8" :span="8" class="marginTop10">{{ rowData.invoiceNo }}</el-col>
        <el-col :span="6" class="text-right marginTop10">联系卖家</el-col><el-col :offset="8" :span="8" class="marginTop10">{{ rowData.boxEastUserTel }}</el-col>
        <!-- <el-col :span="6" class="text-right marginTop10">联系集装箱公司</el-col><el-col :offset="8" :span="8">{{ rowData.boxEastUserTel }}</el-col> -->
        <!-- <el-col :span="6" class="text-right marginTop10">统一社会信用代码</el-col><el-col :offset="8" :span="8">{{ rowData.invoiceTaxNum || rowData.creditCode }}</el-col> -->
        <!-- <el-col :span="12">联系箱贸企业</el-col><el-col :span="12"></el-col> -->
        <!-- <el-col :span="6" class="text-right marginTop10">附件</el-col><el-col :offset="8" :span="8"><showFile :detailFileList="rowData.invoiceUrl"></showFile>  </el-col> -->
        <el-col :span="6" class="text-right marginTop10">在线咨询</el-col><el-col :offset="8" :span="8" class="marginTop10">
          <el-button icon="ChatDotSquare" type="primary" link >咨询</el-button>
        </el-col>
      </el-row>
      <el-row justify="center" class="marginTop20">
          <el-col :span="6" class="text-right"><el-button type="warning" plain @click="param.dialogEnterEmail=true">发送邮箱</el-button></el-col>
          <!-- <el-col :span="6" class="text-center"><el-button type="warning" plain @click="downloadInvoice(rowData.invoiceUrl)">下载发票</el-button></el-col> -->
          <el-col :offset="2" :span="6" class="text-left"><el-button type="warning" plain @click="previewInvoice(rowData.invoiceUrl)">预览发票</el-button></el-col>
      </el-row>
  </div>
  <el-dialog v-model="param.dialogEnterEmail" title="输入邮箱" width="500">
    <el-row align="middle">
      <el-col :offset="2" :span="20"><h3>邮箱地址:</h3></el-col>
    </el-row>
    <template v-for="(item,index) in param.emailList" :key="index">
        <el-row align="middle" class="marginTop5">
          <el-col :offset="2" :span="18"> 
            <!-- <el-input v-model="item.email" type="text" v-email placeholder="请输入有效的邮箱地址"></el-input> -->
            <el-input v-model="item.email" type="email" placeholder="请输入有效的邮箱地址"  @blur="validateEmail(index)"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button icon="Delete" type="danger" size="small" circle plain @click="handleDelete(index)"></el-button>
            <el-button icon="Plus" type="info" size="small" circle plain @click="handleAdd"></el-button>
          </el-col>
        </el-row>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="param.dialogEnterEmail= false">关闭</el-button>
        <el-button type="primary" @click="sendEmail">立即发送</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="param.dialogVis" title="预览发票" width="30%" align-center >
      <!-- <img :src="param.imgUrl" alt="" style="width:100%;"> -->
      <showFile :detailFileList="param.imgUrl"></showFile>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="param.dialogVis = false">关闭</el-button>
        </div>
      </template> -->
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { downloadIamge } from '@/utils/download'
import showFile from '@/components/upload/showFile.vue'
import { sendInvoice } from '@/api/public/index'
import { ElMessage } from 'element-plus';
  const props = defineProps({
    rowData: { 
      type: Object, 
      default: () => ({}) 
    }
  })
  const param = reactive({
    dialogEnterEmail:false,
    id:"",
    email:"",
    emailList:[ { "email": "" }],
    imgUrl:'',
    dialogVis:false
  })
  const sendEmail = () => {
    let emailObj = []
    param.emailList.forEach(item => {
      if(item.email) {
        emailObj.push(item.email)
      }
    })
    let reqParameters = {
      id: props.rowData?.invoiceId,
      email:emailObj
    }
    console.log("reqParametersreqParameters",reqParameters)
    sendInvoice(reqParameters).then((res: any) =>{
      console.log("resresresresresres",res)
      if(res.code == "00000"){
        ElMessage.success("邮件发送成功")
      }else{
        ElMessage.error("邮件发送失败")  
      }
      
    }).catch((err: any) => {
      ElMessage.error("邮件发送失败")
    })
  }

  // 验证邮箱格式
  const validateEmail = (index: number) => {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (!emailRegex.test(param.emailList[index].email)) {
    param.emailList[index].email = ''; // 清空输入框
    ElMessage.warning('请输入有效的邮箱地址'); // 提示用户
  }
};
// 添加邮箱输入项目
  const handleAdd = () => {
    const data = param.emailList[param.emailList.length - 1] //新增 默认copy最后一行的数据
    const emailItem = JSON.parse(JSON.stringify(data))
    param.emailList.push(emailItem)
  }

  // 删除邮箱输入项目
  const handleDelete = (index: any) => {
    if(param.emailList.length > 1){
      param.emailList.splice(index, 1)
    }else{
      ElMessage.warning("至少要保留一个邮箱")
    }
    
  }

  // 预览发票
  const previewInvoice = (row:string) => {
    if(row.length > 0){
      param.imgUrl = row
      param.dialogVis = true
    }else{
      ElMessage.warning("请先上传发票")
    }
    
  }
  // 下载发票
  const downloadInvoice = (row:string) => {
    const rowArr = JSON.parse(row)
    if(rowArr.length > 0){
      downloadIamge(rowArr[0]?.url)
    }else{
      ElMessage.warning("下载失败")
    }
    
  }

</script>
<style lang="scss" scoped>
  .pos-buttom{
    position: absolute;
    bottom: 40px;
    left: 0;
    text-align: center;
    width: 100%;
  }
  .ruler-box .el-col{
    margin: 5px 0;
    color: #333;
  }
  .invoce-box{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
  }
</style>